<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElMessage,
  ElDatePicker,
  ElUpload,
  ElRow,
  ElCol,
  ElTable,
  ElTableColumn,
  ElInputNumber,
  ElMessageBox
} from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { BaseButton } from '@/components/Button'
import { getSecondWarehouseListApi, submitInventoryTransferApi } from '@/api/warehouse/index'
import { getClassificationSelectListApi } from '@/api/logisticsClassification/index'
import { getOrderEnumApi } from '@/api/order/index'
import { uploadFileApi } from '@/api/upload/index'
import { getSellableListApi } from '@/api/regionCountry/index'
import dayjs from 'dayjs'
import { useAppStore } from '@/store/modules/app'

// 移动端检测
const appStore = useAppStore()
const isMobile = computed(() => appStore.getMobile)

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:dialogVisible', 'refresh'])

const formRef = ref()
const countryCategoryList = ref<{ value: number; label: string }[]>([])
const sellableList = ref<{ id: number; cc_name: string; is_sellable: boolean }[]>([])
const logisticsCompanyList = ref<{ value: number; label: string }[]>([])
const logisticsCompanyTree = ref<Array<Record<string, any>>>([])
const warehouseList = ref<any[]>([])

const formData = ref({
  quantity: 1,
  warehouse_id: '',
  arrival_date: '',
  country_category: [] as number[],
  logistics_company: '',
  logistics_no: '',
  delivery_time: new Date(),
  cost: [] as any[],
  transaction_currency_id: 214,
  logistics_cert: [] as any[],
  remark: ''
})

const rules = {
  warehouse_id: [{ required: true, message: '请选择目的地仓库', trigger: 'change' }],
  quantity: [{ required: true, message: '请输入调拨数量', trigger: 'blur' }],
  logistics_company: [{ required: true, message: '请选择物流公司', trigger: 'change' }],
  arrival_date: [{ required: true, message: '请选择到货日期', trigger: 'change' }],
  country_category: [
    {
      required: true,
      message: '请选择可售国家地区',
      trigger: 'change',
      validator: (rule: any, value: any, callback: any) => {
        if (!value || (Array.isArray(value) && value.length === 0)) {
          callback(new Error('请选择可售国家地区'))
        } else {
          callback()
        }
      }
    }
  ]
}

const operatorOptions = ref<Record<string, any>>({})
const fetchSelectOptions = async () => {
  // 国家分类
  const resCountry = await getClassificationSelectListApi()
  if (resCountry?.data) {
    countryCategoryList.value = resCountry.data
  }
  // 目的地仓库和物流公司
  const resOrderEnum = await getOrderEnumApi()
  if (resOrderEnum?.data) {
    // warehouseList.value = resOrderEnum.data.warehouse || []
    operatorOptions.value = resOrderEnum.data
    logisticsCompanyList.value = resOrderEnum.data.logistics_company || []
    logisticsCompanyTree.value =
      resOrderEnum.data.logistics_company_tree || resOrderEnum.data.logistics_company || []
  }
}

const getWarehouseList = async () => {
  try {
    const res = await getSecondWarehouseListApi({ disabled: false })
    if (res?.data?.list) {
      // 直接赋值
      warehouseList.value = res.data.list
      warehouseList.value.forEach((item) => {
        if (item.value == props.row.wid) {
          item.disabled = true // 添加 disabled 属性
        }
        if (item.children && item.children.length) {
          item.children.forEach((child) => {
            if (child.value == props.row.wid) {
              child.disabled = true // 添加 disabled 属性
            }
          })
        }
      })
    } else {
      warehouseList.value = []
    }
  } catch (error) {
    console.error('获取仓库列表失败:', error)
    warehouseList.value = []
  }
}

// 获取可售国家地区列表
const getSellableList = async (warehouseId: number | number[]) => {
  // 重置可售国家分类
  formData.value.country_category = []
  sellableList.value = []

  if (!warehouseId || (Array.isArray(warehouseId) && warehouseId.length === 0)) {
    return
  }

  const id = Array.isArray(warehouseId) ? warehouseId.join(',') : warehouseId
  if (!id) {
    return
  }

  try {
    const resp = await getSellableListApi({ id })
    if (resp?.data?.list) {
      sellableList.value = resp.data.list
      // 自动选中默认可售地区
      const defaultSellable = sellableList.value.filter((item) => item.is_sellable)
      if (defaultSellable.length > 0) {
        formData.value.country_category = defaultSellable.map((item) => item.id)
      }
    }
  } catch (error) {
    console.error('获取可售国家地区失败:', error)
    sellableList.value = []
  }
}

const handleClose = () => {
  formRef.value?.resetFields()
  emit('update:dialogVisible', false)
}
const uploadRef = ref<any>(null)
const loading = ref(false)
const handleConfirm = async () => {
  // 校验成本数组
  if (Array.isArray(formData.value.cost)) {
    for (let i = 0; i < formData.value.cost.length; i++) {
      const item = formData.value.cost[i]
      if (!item.type || item.amount === '' || item.amount === null || item.amount === 0) {
        ElMessage.warning('成本类型、金额不能为空')
        return
      }
    }
  }
  try {
    await ElMessageBox.confirm('是否确认提交调拨？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  } catch {
    // 用户点了取消
    return
  }
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    // 拼接参数
    let productInfo: Array<{ inventory_id: any; num: any }> = []
    if (props.row?.is_bulk && Array.isArray(props.row.selected_items)) {
      productInfo = props.row.selected_items.map((item: any) => ({
        inventory_id: item.id,
        num: item.bulk_transfer_num
      }))
    } else {
      productInfo = [
        {
          inventory_id: props.row.id,
          num: formData.value.quantity
        }
      ]
    }

    // 调试日志：检查文件列表
    console.log('上传的文件列表:', formData.value.logistics_cert)

    // 优化文件ID提取逻辑
    const fileIds = formData.value.logistics_cert
      .filter((file: any) => {
        console.log('文件检查:', file, file.response)
        return file.response?.data?.id || file.id
      })
      .map((file: any) => file.response?.data?.id || file.id)
      .filter((id) => id) // 过滤掉空值

    console.log('提取的文件ID:', fileIds)

    let result = await uploadRef.value?.uploadImg()
    console.log('result', result)
    if (result) {
      ElMessage.warning('上传中,请稍等')
      return
    }
    const params = {
      productInfo,
      wid: formData.value.warehouse_id,
      arrival_date: formData.value.arrival_date
        ? dayjs(formData.value.arrival_date).format('YYYY-MM-DD')
        : '',
      cc_name_id: Array.isArray(formData.value.country_category)
        ? formData.value.country_category.join(',')
        : formData.value.country_category,
      company_id: formData.value.logistics_company,
      logistics_no: formData.value.logistics_no,
      logistics_voucher: formData.value.logistics_cert.map((e) => e.id).join(','),
      ship_date: formData.value.delivery_time
        ? dayjs(formData.value.delivery_time).format('YYYY-MM-DD')
        : '',
      cost: formData.value.cost,
      notes: formData.value.remark
    }

    console.log('提交参数:', params)
    if (loading.value) return
    loading.value = true
    const res = await submitInventoryTransferApi(params)
    if (res?.code === 0 && res?.data?.success) {
      ElMessage.success('调拨成功')
      emit('refresh')
      handleClose()
    } else {
      ElMessage.error('调拨失败')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

const handleIntInput = (obj, key, val) => {
  if (val === '' || val === null) return
  obj[key] = Math.max(1, Math.floor(Number(val)))
}

const customUploadRequest = async (options) => {
  const { file, onSuccess, onError } = options
  console.log('开始上传文件:', file.name)

  try {
    const formDataData = new FormData()
    formDataData.append('file', file)
    formDataData.append('directory', '14')

    const res = await uploadFileApi(formDataData)
    console.log('上传API响应:', res)

    if (res?.code === 0) {
      // 检查数据是否完整
      if (res.data) {
        console.log('上传成功，调用onSuccess')
        onSuccess(res, file)
      } else {
        console.error('上传成功但数据为空:', res)
        onError(new Error('上传成功但数据为空'))
      }
    } else {
      console.error('上传失败，响应:', res)
      onError(new Error((res as any)?.message || '上传失败'))
    }
  } catch (err) {
    console.error('上传异常:', err)
    onError(err)
  }
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log('上传成功回调:', response, file, fileList)

  // 检查响应是否成功
  if (response?.code === 0) {
    // 检查响应数据是否完整
    if (response.data && response.data.url) {
      file.url = response.data.url
      file.name = response.data.name || file.name
      file.response = response

      // 如果有ID，设置ID字段
      if (response.data.id) {
        file.id = response.data.id
      }

      // 确保文件列表同步更新
      formData.value.logistics_cert = [...fileList]
      console.log('更新后的文件列表:', formData.value.logistics_cert)

      // 显示成功提示
      ElMessage.success('文件上传成功')
    } else {
      console.error('上传响应数据不完整:', response)
      ElMessage.error('文件上传失败：响应数据不完整')
    }
  } else {
    console.error('上传响应异常:', response)
    ElMessage.error(`文件上传失败：${(response as any)?.message || '未知错误'}`)
  }
}

const handleExceed = () => {
  ElMessage.warning('最多只能上传5张图片')
}

const handleRemove = (file) => {
  console.log('删除文件:', file)
  const index = formData.value.logistics_cert.findIndex((item) => item.uid === file.uid)
  if (index > -1) {
    formData.value.logistics_cert.splice(index, 1)
    console.log('删除后的文件列表:', formData.value.logistics_cert)
  }
}
const removeCostRow = (index: number) => {
  ElMessageBox.confirm('确定要删除该成本项吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      formData.value.cost.splice(index, 1)
    })
    .catch(() => {
      // 用户取消，无操作
    })
}
const addCostRow = () => {
  formData.value.cost.push({ type: '', amount: '', transaction_currency_id: 214 })
}
//上传成功以后回调
const handleUploadCallback = (val: any) => {
  formData.value.logistics_cert.push(...val)
}
// 监听row变化，重置表单
watch(
  () => props.row,
  (newVal) => {
    console.log('newVal_row', newVal)
    if (newVal) {
      // 批量调拨时，初始化每个商品的调拨数量（可自定义字段名）
      if (newVal.is_bulk && Array.isArray(newVal.selected_items)) {
        newVal.selected_items.forEach((item) => {
          item.bulk_transfer_num = 1
        })
      }
    }
  },
  { immediate: true }
)

// 监听弹窗显示状态，获取仓库列表
watch(
  () => props.dialogVisible,
  (newVal) => {
    if (newVal) {
      fetchSelectOptions()
      getWarehouseList()
      formData.value = {
        quantity: 1,
        warehouse_id: '',
        arrival_date: '',
        country_category: [] as number[],
        logistics_company: '',
        logistics_no: '',
        delivery_time: new Date(),
        cost: [] as any[],
        transaction_currency_id: 214,
        logistics_cert: [],
        remark: ''
      }
    }
  }
)
</script>

<template>
  <ElDialog
    :model-value="dialogVisible"
    :title="'库存调拨'"
    :width="isMobile ? '95%' : '900px'"
    :close-on-click-modal="false"
    @close="handleClose"
    :class="isMobile ? 'mobile-dialog' : ''"
  >
    <div class="max-h-[calc(80vh-136px)] overflow-y-auto overflow-x-hidden" v-if="dialogVisible">
      <!-- 批量勾选：移动端显示卡片，桌面端显示表格 -->
      <template v-if="row.is_bulk && Array.isArray(row.selected_items)">
        <div v-if="isMobile" class="mobile-bulk-cards">
          <el-card v-for="item in row.selected_items" :key="item.id" class="bulk-item-card">
            <template #header>
              <div class="bulk-card-header">
                <span class="product-name">{{ item.product_name }}</span>
              </div>
            </template>
            <div class="bulk-card-content">
              <div class="quantity-input">
                <span class="input-label">调拨数量:</span>
                <ElInputNumber
                  v-model="item.bulk_transfer_num"
                  :min="1"
                  :max="item.transfer_num"
                  :step="1"
                  :precision="0"
                  @change="(val) => handleIntInput(item, 'bulk_transfer_num', val)"
                  style="width: 120px"
                />
              </div>
            </div>
          </el-card>
        </div>
        <ElTable v-else :data="row.selected_items" border size="small" class="bulk-table-wrapper">
          <ElTableColumn prop="product_name" label="商品名称" min-width="120" />
          <ElTableColumn label="调拨数量" min-width="120">
            <template #default="scope">
              <ElInputNumber
                v-model="scope.row.bulk_transfer_num"
                :min="1"
                :max="scope.row.transfer_num"
                :step="1"
                :precision="0"
                @change="(val) => handleIntInput(scope.row, 'bulk_transfer_num', val)"
              />
            </template>
          </ElTableColumn>
        </ElTable>
      </template>

      <!-- 表单：移动端垂直布局，桌面端保持栅格布局 -->
      <ElForm
        ref="formRef"
        :model="formData"
        :rules="rules"
        :label-width="isMobile ? '100px' : '110px'"
        :class="isMobile ? 'mobile-allot-form' : 'allot-form'"
      >
        <template v-if="isMobile">
          <ElFormItem v-if="!row.is_bulk" label="调拨数量" prop="quantity">
            <ElInputNumber
              v-model="formData.quantity"
              :min="1"
              :max="row.actual_available_qty"
              :step="1"
              :precision="0"
              @change="(val) => handleIntInput(formData, 'quantity', val)"
              placeholder="请输入调拨数量"
            />
          </ElFormItem>

          <ElFormItem label="目的地仓库" prop="warehouse_id">
            <el-tree-select
              v-model="formData.warehouse_id"
              :data="warehouseList"
              style="width: 100%"
              placeholder="请选择目的地仓库"
              clearable
              @change="(val) => getSellableList(val)"
            />
          </ElFormItem>

          <ElFormItem label="到货日期" prop="arrival_date" required>
            <ElDatePicker
              v-model="formData.arrival_date"
              type="date"
              placeholder="请选择到货日期"
              style="width: 100%"
            />
          </ElFormItem>

          <ElFormItem label="可售国家分类" prop="country_category" required>
            <ElSelect
              v-model="formData.country_category"
              placeholder="请选择可售国家分类"
              multiple
              filterable
              style="width: 100%"
            >
              <ElOption label="全球" :value="0" />
              <ElOption
                v-for="item in sellableList"
                :key="item.id"
                :label="item.cc_name"
                :value="item.id"
                :disabled="formData.country_category.includes(0)"
              />
            </ElSelect>
          </ElFormItem>

          <ElFormItem label="物流公司" prop="logistics_company" required>
            <el-tree-select
              v-model="formData.logistics_company"
              :data="logisticsCompanyTree"
              :props="{
                children: 'children',
                label: 'name',
                value: 'id',
                disabled: (data) => data.company_type === 1
              }"
              placeholder="请选择物流公司"
              clearable
              :render-after-expand="false"
              :check-strictly="true"
              :default-expand-all="true"
              style="width: 100%"
            />
          </ElFormItem>

          <ElFormItem label="物流单号">
            <ElInput v-model="formData.logistics_no" placeholder="请输入物流单号" />
          </ElFormItem>

          <ElFormItem label="发货时间">
            <ElDatePicker
              v-model="formData.delivery_time"
              type="date"
              placeholder="请选择发货时间"
              style="width: 100%"
            />
          </ElFormItem>
        </template>

        <ElRow v-else :gutter="20">
          <ElCol :span="12" v-if="!row.is_bulk">
            <ElFormItem label="调拨数量" prop="quantity">
              <ElInputNumber
                v-model="formData.quantity"
                :min="1"
                :max="row.actual_available_qty"
                :step="1"
                :precision="0"
                @change="(val) => handleIntInput(formData, 'quantity', val)"
                placeholder="请输入调拨数量"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="目的地仓库" prop="warehouse_id">
              <el-tree-select
                v-model="formData.warehouse_id"
                :data="warehouseList"
                style="width: 100%"
                placeholder="请选择目的地仓库"
                clearable
                @change="(val) => getSellableList(val)"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="到货日期" prop="arrival_date" required>
              <ElDatePicker
                v-model="formData.arrival_date"
                type="date"
                placeholder="请选择到货日期"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="可售国家分类" prop="country_category" required>
              <ElSelect
                v-model="formData.country_category"
                placeholder="请选择可售国家分类"
                multiple
                filterable
              >
                <ElOption label="全球" :value="0" />
                <ElOption
                  v-for="item in sellableList"
                  :key="item.id"
                  :label="item.cc_name"
                  :value="item.id"
                  :disabled="formData.country_category.includes(0)"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="物流公司" prop="logistics_company" required>
              <el-tree-select
                v-model="formData.logistics_company"
                :data="logisticsCompanyTree"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'id',
                  disabled: (data) => data.company_type === 1
                }"
                placeholder="请选择物流公司"
                clearable
                :render-after-expand="false"
                :check-strictly="true"
                :default-expand-all="true"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="物流单号">
              <ElInput v-model="formData.logistics_no" placeholder="请输入物流单号" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="发货时间">
              <ElDatePicker
                v-model="formData.delivery_time"
                type="date"
                placeholder="请选择发货时间"
                style="width: 100%"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="成本">
              <!-- <ElInput v-model="formData.cost" placeholder="0.00" type="number" /> -->
              <div class="flex flex-col">
                <div
                  v-for="(item, index) in formData.cost"
                  :key="item.type"
                  class="cost-row"
                  style="display: flex; align-items: center; margin-bottom: 8px"
                >
                  <el-select
                    v-model="item.type"
                    placeholder="请选择成本类型"
                    style="width: 140px; margin-right: 8px"
                  >
                    <el-option
                      v-for="option in operatorOptions.costing"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                      :disabled="
                        formData.cost.some((c, i) => c.type === option.value && i !== index)
                      "
                    />
                  </el-select>
                  <el-input-number
                    v-model="item.amount"
                    :min="0"
                    :max="999999"
                    placeholder="金额"
                    style="width: 140px; margin-right: 8px"
                  />
                  <el-select
                    v-model="item.transaction_currency_id"
                    placeholder="币种"
                    style="width: 140px; margin-right: 8px"
                  >
                    <el-option
                      v-for="currencyItem in operatorOptions.currency"
                      :key="currencyItem.value"
                      :label="currencyItem.label"
                      :value="currencyItem.value"
                    />
                  </el-select>
                  <el-button type="danger" @click="removeCostRow(index)">删除</el-button>
                </div>
                <div class="flex items-center">
                  <el-button type="primary" @click="addCostRow">添加</el-button>
                </div>
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>

        <!-- 成本模块：移动端单独卡片样式 -->
        <ElFormItem v-if="isMobile" label="成本">
          <div class="mobile-cost-wrapper">
            <div v-for="(item, index) in formData.cost" :key="index" class="mobile-cost-item">
              <el-select
                v-model="item.type"
                placeholder="请选择成本类型"
                style="width: 100%; margin-bottom: 8px"
              >
                <el-option
                  v-for="option in operatorOptions.costing"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  :disabled="formData.cost.some((c, i) => c.type === option.value && i !== index)"
                />
              </el-select>
              <div style="display: flex; gap: 8px; margin-bottom: 8px">
                <el-input-number
                  v-model="item.amount"
                  :min="0"
                  :max="999999"
                  placeholder="金额"
                  style="flex: 1"
                />
                <el-select
                  v-model="item.transaction_currency_id"
                  placeholder="币种"
                  style="width: 100px"
                >
                  <el-option
                    v-for="currencyItem in operatorOptions.currency"
                    :key="currencyItem.value"
                    :label="currencyItem.label"
                    :value="currencyItem.value"
                  />
                </el-select>
              </div>
              <el-button
                type="danger"
                size="small"
                @click="removeCostRow(index)"
                style="width: 100%; margin-bottom: 12px"
                >删除</el-button
              >
            </div>
            <el-button type="primary" @click="addCostRow" style="width: 100%">添加成本</el-button>
          </div>
        </ElFormItem>

        <ElFormItem label="备注" style="width: 100%">
          <ElInput v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </ElFormItem>
        <ElFormItem label="物流凭证">
          <UploadFilesBase
            ref="uploadRef"
            class="w-full"
            :directory="2"
            :limit="99"
            :fileListMap="formData.logistics_cert"
            @upload-success-res="handleUploadCallback"
          />
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <div :class="isMobile ? 'mobile-footer' : ''">
        <BaseButton @click="handleClose">取消</BaseButton>
        <BaseButton type="primary" @click="handleConfirm" :loading="loading">确定</BaseButton>
      </div>
    </template>
  </ElDialog>
</template>

<style scoped lang="less">
// 移动端样式
@media (width <= 968px) {
  .mobile-dialog {
    :deep(.el-dialog) {
      max-height: 90vh;
      margin: 5vh auto;
      overflow-y: auto;
    }

    :deep(.el-dialog__header) {
      padding: 16px 20px 12px;
    }

    :deep(.el-dialog__body) {
      max-height: calc(90vh - 140px);
      padding: 0 20px 20px;
      overflow-y: auto;
    }

    :deep(.el-dialog__footer) {
      padding: 12px 20px 20px;
    }
  }

  .mobile-allot-form {
    .el-form-item {
      margin-bottom: 16px;

      .el-form-item__label {
        width: 100px !important;
        text-align: left;
      }

      .el-form-item__content {
        margin-left: 100px !important;
      }
    }
  }

  .mobile-bulk-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;

    .bulk-item-card {
      border-radius: 6px;

      .bulk-card-header {
        .product-name {
          font-size: 14px;
          font-weight: 600;
        }
      }

      .bulk-card-content {
        padding: 0;

        .quantity-input {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .input-label {
            font-weight: 500;
            color: #666;
          }
        }
      }
    }
  }

  .mobile-cost-wrapper {
    width: 100%;

    .mobile-cost-item {
      padding: 12px;
      margin-bottom: 12px;
      background-color: #fafafa;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
    }
  }

  .mobile-footer {
    display: flex;
    gap: 12px;

    .el-button {
      flex: 1;
    }
  }
}

.allot-form {
  .el-form-item {
    margin-bottom: 18px;
  }
}

.upload-cert-center {
  display: flex;
  height: 100%;
  font-size: 14px;
  color: #999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-upload-list__item {
  position: relative;

  .el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .el-upload-list__item-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }

    .el-upload-list__item-delete {
      font-size: 20px;
      color: #fff;
      cursor: pointer;

      &:hover {
        color: #f56c6c;
      }
    }
  }

  &:hover .el-upload-list__item-actions {
    opacity: 1;
  }
}

.bulk-table-wrapper {
  max-height: 300px;
  margin-bottom: 24px;
  overflow-y: auto;
}

.el-dialog__header {
  border: none !important;
}
</style>
